<template>
    <div class="container">
      <div class="item">
        <div class="name" style="color: #b6e3fe;">区县名称</div>
        <div class="value" style="color: #b6e3fe;">目录数</div>
      </div>
      <vue-seamless-scroll
      :class-option="kszymlScrollOptions"
      :data="kszyml"
      style="height:100%;
      overflow: hidden;
      width:100%;"
      >
        <div class="item" v-for="(item,index) in kszyml" :key="index">
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </template>
  
  <script>
  import VueSeamlessScroll from 'vue-seamless-scroll';
  
  export default {
    name: 'HelloWorld',
    components: {
      VueSeamlessScroll
    },
    data() {
      return {
        kszyml: [
          {name:"伊犁哈萨克自治州",value:"54"},
          {name:"昌吉回族自治州",value:"43"},
          {name:"阿克苏地区",value:"12"},
          {name:"博尔塔拉蒙古自治州",value:"68"},
          {name:"伊犁哈萨克自治州",value:"54"},
          {name:"昌吉回族自治州",value:"43"},
          {name:"阿克苏地区",value:"12"},
          {name:"博尔塔拉蒙古自治州",value:"68"},
        ],
        kszymlScrollOptions:{
          step: 0.1, // 滚动速度
          limitMoveNum:4, // 开启无缝滚动的数据量
          hoverStop: true, // 是否启用鼠标hover控制
          openWatch: true,
          direction: 1, // 滚动方向
          singleHeight:0,
          singleWitdh:0,
          waitTime:1000,
        },
      };
    },
  };
  </script>
  
  <style scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .item{
    display: flex;
    align-items:center;
    justify-content: center;
    width: 19vw;
    height: 3vh;
    background-color: rgba(0, 63, 115, 0.7);
    margin-bottom: 0.8vh;
  }
  .item :hover{
    background-color: rgba(240, 171, 51,0.9);
    color: #000;
  }
  .name{
    width: 75%;
    height: 100%;
    display: flex;
    align-items:center;
    justify-content: left;
    color: #7f9cb4;
    font-size: 0.9rem;
    padding-left: 1vw;
  }
  .value{
    width: 20%;
    height: 100%;
    display: flex;
    align-items:center;
    justify-content: center;
    color: #7f9cb4;
    font-size: 0.9rem;
  }
  
  </style>